<template>
  <div
    class="collapse-layout"
    :class="[{ hide: modelValue }, mode]"
    :style="{ width: width,  height: height }"
  >
    <slot />

    <el-icon v-if="!disabled" class="collapse-btn" @click="handlerCollapse"
      ><ArrowRight /></el-icon
    >
  </div>
</template>

<script setup name="CollapseLayout">
// 折叠布局
import { ArrowRight } from '@element-plus/icons-vue'
const emit = defineEmits(['update:modelValue'])

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  mode: {
    type: String,
    default: 'left'
  },
  width: {
    type: String,
    default: '410px'
  },
  height: {
    type: String,
    default: '940px'
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const handlerCollapse = () => {
  emit('update:modelValue', !props.modelValue)
}
</script>

<style lang="scss" scoped>
.collapse-layout {
  position: absolute;
  top: 100px;
  left: 0;
  width: 410px;
  height: calc(940px);
  padding-left: 20px;
  transition: all 0.3s ease-in-out;
  &.hide {
    transform: translateX(-100%);
    .collapse-btn {
      transform: translateY(-50%);
    }
  }
  &.right {
    left: auto;
    right: 0;
    padding-left: 0;
    padding-right: 20px;
    &.hide {
      transform: translateX(100%);
      .collapse-btn {
        transform: translateY(-50%) rotate(180deg);
      }
    }
    .collapse-btn {
      transform: translateY(-50%);
      right: auto;
      left: -18px;
    }
  }
  .collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
    width: 18px;
    height: 50px;
    position: absolute;
    right: -18px;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    cursor: pointer;
  }
}
</style>
